<template>
  <IFexHeaderMain>
    <template #header>
      <IHeader :bankUrl="'/pages/index/index'">当前寄存</IHeader>
    </template>
    <view class="baoguo-container wh_auto" style="background: #f5f7fa">
      <view class="locker-card" @click.stop="onClick" v-for="(item, index) in ordeyInfoArr" :key="index">
        <view class="card-header">
          <view class="header-content">
            <view class="location-info">
              <uni-icons type="location-filled" size="18" color="#4DE8C2"></uni-icons>
              <text class="location-text">{{ item.pointName }}</text>
            </view>
            <text class="locker-name">{{ item.counterAlias }}{{ item.doorNo }} 号柜</text>
          </view>
        </view>

        <view class="locker-details">
          <view class="detail-item">
            <text class="detail-label">寄存时间</text>
            <text class="detail-value">{{ item.startTime }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">使用时长</text>
            <text class="detail-value">{{ item.useLong }} 分</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">状态</text>
            <text class="detail-value status-active">使用中</text>
          </view>
        </view>

        <view class="action-buttons">
          <button class="action-btn secondary" @click.stop="handleOpenAgain(item.userStorageId, '2')"> 中途开门（继续租用柜子） </button>
          <button class="action-btn" :class="parseInt(item.useLong || 0) > 2 ? 'primary' : 'secondary'" @click.stop="handleOpenAgain(item.userStorageId, '3')"> 结束寄存（开门并结束） </button>
        </view>
      </view>
      <view class="wrapper whov" v-if="ordeyInfoArr.length === 0">
        <view class="empty-state"> 暂无寄存记录 </view>
      </view>
    </view>
    <template #footer>
      <ITabBar :index="1" />
    </template>
  </IFexHeaderMain>
</template>

<script setup lang="ts" name="baoguo">
  import { computed, onMounted, ref } from 'vue'
  import ITabBar from '@/components/container/ITabBar.vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import { useNavigatePage } from '@/hooks/navigateTo'
  import useToastMsg from '@/hooks/sysMsg'
  import { getUseOrderInfoList, noAuthMessage, orderEnd } from '@/api/currentLocker'
  import useUserInfoStore from '@/store/userInfo'
  import { LoginStatusCheck } from '@/utils/login'
  import { subscribeMsg } from '@/utils'
  const userInfoStore = useUserInfoStore()
  const userInfo = computed(() => userInfoStore.getUserInfo)
  const toastMsg = useToastMsg()
  const navigatePage = useNavigatePage()
  const ordeyInfoArr = ref<any[]>([])
  onMounted(async () => init())
  const init = async () => {
    LoginStatusCheck(async () => {
      toastMsg.showLoading()
      const result = await getUseOrderInfoList(userInfo.value.userId)
      if (result) {
        ordeyInfoArr.value = result.data
      }
      toastMsg.hideLoading()
    })
  }
  const handleOpenAgain = async (userStorageId: string, type: string) => {
    // const subResult = await subscribeMsg(['KwWXv1WId2UMjOUQmuOBiuTxIX2Pzk9DQQS14NJdXE8'])
    // if (subResult === true) {
    //   noAuthMessage(userInfo.value.userId, '1')
    toastMsg.showModalMsg({
      title: type === '2' ? '中途开门' : '结束寄存',
      content: type === '2' ? '继续使用，订单将会持续计时' : '确定要结束寄存并结算费用吗？',
      options: {
        confirmText: '去开门',
        confirmColor: '#6aa8ff',
      },
      successCallback: async () => {
        const result = await orderEnd(userInfo.value.userId, userStorageId, type)
        if (result && result.code == 200) {
          toastMsg.showToast('柜子已打开')
          if (type == '3') {
            navigatePage.navigateTo(`/pages/confirmRoom/payDetail?userStorageId=` + userStorageId)
          }
          setTimeout(() => {
            init()
          }, 1500)
        }
      },
    })
    // } else {
    //   noAuthMessage(userInfo.value.userId, '2')
    //   toastMsg.showToast('请允许订阅消息，以完成消息通知')
    // }
  }
  const onClick = () => {
    navigatePage.navigateTo('/pages/order/index')
  }
</script>

<style scoped>
  .baoguo-container {
    padding: 20rpx;
    background-color: #f5f7fa;
  }

  /* 评价提示条 */
  .rating-alert {
    display: flex;
    align-items: center;
    padding: 15rpx 20rpx;
    background-color: #fffbe6;
    border-radius: 8rpx;
    margin: 0 20rpx 20rpx;
  }

  .alert-text {
    font-size: 26rpx;
    color: #faad14;
    margin-left: 10rpx;
  }

  /* 寄存信息卡片 */
  .locker-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 30rpx;
  }

  /* 卡片头部 */
  .card-header {
    padding: 15rpx;
    background: linear-gradient(135deg, #3b82f6, #6aa8ff);
    color: white;
  }

  .location-info {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
  }

  .location-text {
    font-size: 30rpx;
    color: rgba(255, 255, 255, 0.9);
    margin-left: 8rpx;
    font-weight: 700;
  }

  .locker-name {
    font-size: 34rpx;
  }

  /* 寄存详情 */
  .locker-details {
    padding: 15rpx;
    border-bottom: 1px solid #f0f0f0;
  }

  .detail-item {
    display: flex;
    justify-content: space-between;
    padding: 15rpx 0;
    border-bottom: 1px solid #f5f5f5;
  }

  .detail-item:last-child {
    border-bottom: none;
  }

  .detail-label {
    font-size: 32rpx;
    color: #666666;
  }

  .detail-value {
    font-size: 32rpx;
    color: #333333;
  }

  .status-active {
    color: #52c41a;
    font-weight: 700;
  }

  /* 操作按钮 */
  .action-buttons {
    padding: 15rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .action-btn {
    border-radius: 12rpx;
    font-size: 34rpx;
    font-weight: 500;
    transition: all 0.3s;
    margin: 0px;
  }

  .secondary {
    background-color: #f5f7fa;
    color: #333333;
    border: 1px solid #e5e7eb;
  }

  .primary {
    background-color: #f3a73f;
    color: white;
    border: none;
  }

  /* 帮助提示 */
  .help-tips {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #e6f7ff;
    border-radius: 12rpx;
    margin: 0 20rpx;
  }
</style>
